<template>
  <div id="app">
    <!--底部 -->

    <mt-tabbar v-model="selected" class="mt-tabbar">


      <mt-tab-item id="首页">
        <img slot="icon" src="./assets/home.png">
        <router-link to="/home" class="icon">
        首页
        </router-link>
      </mt-tab-item>



      <mt-tab-item id="热搜">
        <img slot="icon" src="./assets/hot.png">
        <router-link to="/hot" class="icon">
        热搜
        </router-link>
      </mt-tab-item>


      <mt-tab-item id="发现">
        <img slot="icon" src="./assets/find.png">
         <router-link to="/find" class="icon">
        发现
        </router-link>
      </mt-tab-item>

      <mt-tab-item id="我的">
        <img slot="icon" src="./assets/mine.png">
        <router-link to="/mine" class="icon">
        我的
        </router-link>
      </mt-tab-item>
  </mt-tabbar>

  <router-view></router-view>
  </div>
</template>

<script>
import home from './components/home.vue'
import hot from './components/hot.vue'
import find from './components/find.vue'
import mine from './components/mine.vue'
import test from './components/test.vue'
import more from './components/more.vue'

export default {
  name: 'app',
  data(){
    return{
      selected:'首页'
    }
  },
  components: {
    home,
    find,
    hot,
    mine,
    test,
    more
  }
}
</script>

<style scoped>
/*底部*/
.mt-tabbar{
  position: fixed;
  z-index:99999
}
.icon{
  text-decoration:none;
  display: block
}
</style>
